<template>
  <div class="page">
    <van-nav-bar left-arrow @click-left="onClickBack" title="会议室编辑" class="my-nav-bar" />
    <van-form @submit="onSubmit" label-width="70px"
      style="height:calc(100% - 47px);overflow: auto;padding: 1px 15px 0;">
      <div class="my-form">
        <van-cell-group inset style="margin: 0px;">
          <van-field v-model="formData.roomName" required name="roomName" label="会议室名称" placeholder="请输入会议室名称"
            :rules="[{ required: true }]" />
          <van-field :value="formData.roomManagers" required name="roomManagers" label="会议室管理" readonly clickable
            @click="showPicker = true" placeholder="请选择会议室管理" right-icon="arrow" :rules="[{ required: true }]" />

          <van-field :value="formData.rommServersName" required name="rommServersName" label="服务人员"
            placeholder="请选择服务人员" readonly clickable :rules="[{ required: true }]" @click="showPicker2 = true"
            right-icon="arrow" />


          <van-field readonly clickable v-model="formData.roomEquipmentsName" required name="roomEquipmentsName"
            label="设备配置" placeholder="请选择设备配置" :rules="[{ required: true }]" @click="showPicker3 = true"
            right-icon="arrow" />
          <van-field name="fileList" label="会议室照片">
            <template #input>
              <van-uploader v-model="formData.fileList" :before-read="beforeRead" :after-read="afterRead" />
            </template>
          </van-field>
          <van-field v-model="formData.roomSeatNum" required name="roomSeatNum" label="人数" type="digit"
            placeholder="人数须在2人以上" :rules="[{ required: true }, { validator: (value) => value >= 2, message: '人数须在2人以上' }]" />
          <van-field v-model="formData.roomAddr" required name="roomAddr" label="地点" placeholder="请输入地点"
            :rules="[{ required: true }]" />
          <van-field v-model="formData.roomLevel" required name="roomLevel" label="序号权重" placeholder="请输入序号权重"
            type="number" :rules="[{ required: true }]" />
        </van-cell-group>
      </div>
      <div class="footer">
        <van-button type="info" native-type="submit" class="btn" :disabled="loading1" :loading="loading2"> 保
          存</van-button>
        <van-button type="warning" class="btn" @click="handleDelete($event)" :disabled="loading2" :loading="loading1"
          v-if="this.formData.id"
          native-type="button"
        > 
          删 除
        </van-button>
      </div>
    </van-form>
    <selectPerson v-if="showPicker" @close="onConfirm" />
    <selectPerson v-if="showPicker2" @close="onConfirm2" />
    <selectMultiple v-if="showPicker3" :optios="equipmentOption" :ids="formData.roomEquipmentsId" @close="onConfirm3" />
  </div>
</template>
<script>
import Vue from "vue";
import { Image, Divider, Toast, Uploader, Picker, Popup } from "vant";
import { fileuploadUrl, fileShowUrl } from "@/utils/Axios";
import selectMultiple from "@/components/selectMultiple"
import selectPerson from "./selectPerson"
Vue.use(Popup);
Vue.use(Picker);
Vue.use(Uploader);
Vue.use(Toast);
Vue.use(Divider);
Vue.use(Image);

export default {
  name: "meetingSetEdit",
  components: { selectMultiple, selectPerson },
  data() {
    return {
      loading1: false,
      loading2: false,
      administratorsOption: [
        { id: "ceshi", name: '李四11' },
        { id: "zhangsan", name: '张三' }
      ],
      attendantOption: [
        { id: "admin", name: '王五' },
        { id: "jeecg", name: '赵六' }
      ],
      equipmentOption: [],
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      formData: {
        roomName: "",
        roomMamagersId:"",
        roomServersId:"",
        roomEquipmentsId:"",
        fileList: []
      }
    }
  },
  mounted() {
    if (this.$route.params.id) {
      const roomImgs = this.$route.params.roomImgs?.split?.(",")?.map(item => ({ url: `${fileShowUrl}${item}` })) || [];
      this.formData = { ...this.$route.params, fileList: roomImgs }
      console.log(this.formData)
    }
    this.$axios({
      url: `/meet/roomNeedItem/list?column=createTime&order=desc&pageNo=1&pageSize=1000&itemType=2`
    }).then(res => {
      this.equipmentOption = res.records?.map(item => ({ ...item, name: item.itemName }))
    })
  },
  methods: {
    // 上传之前
    beforeRead(file) {
      console.log("file", file);
      if (!file.type.includes("image")) {
        Toast('请上传图片');
        return false;
      }
      return true;
    },
    afterRead(file, fIndex) {
      console.log("file", fIndex, file);
      file.status = 'uploading';
      file.message = '上传中...';
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("biz", "temp");
      this.$axios({
        specialUrl: fileuploadUrl,
        method: "post",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }, { callbackFile: (response) => response.data}).then(res => {
        file.status = 'done';
        this.formData.fileList[fIndex.index].url = `${fileShowUrl}${res.message}`
        file.message = '上传成功';
      }).catch(() => {
        file.status = 'failed';
        file.message = '上传失败';
      })
    },
    onClickBack() {
      this.$router.push('/meetingSet');
    },
    onSubmit(event) {
      if (this.loading2) return; // 如果正在提交，直接返回
      if (event && typeof event.preventDefault === "function") {
        event.preventDefault();
      }
      console.log("this.formData", this.formData);
      // return
      const postparams = { ...this.formData, roomImgs: this.formData.fileList.map(item => item.url.replace(fileShowUrl, "")).join(",") }
      delete postparams.fileList;
      this.loading2 = true;
      this.$axios({
        url: `/meetingDetail/${this.formData.id ? "edit" : "add"}`,
        method: "post",
        data: postparams
      }).then((res) => {
        Toast.success(res || "操作成功");
        this.$router.push('/meetingSet');
      }).finally(() => {
        this.loading2 = false;
      })
    },
    onConfirm(data) {
      this.showPicker = false
      if (!data) return;
      console.log("data", data);
      this.formData.roomMamagersId = data.personsId;
      this.formData.roomManagers = data.persons;
     
    },
    onConfirm2(data) {
      this.showPicker2 = false
      if (!data) return;
      console.log("data", data);
      this.formData.rommServersName = data.persons;
      this.formData.roomServersId = data.personsId;
    },
    onConfirm3(data) {
      this.showPicker3 = false
      if (!data) return;
      console.log("data", data);
      this.formData.roomEquipmentsId = data.id;
      this.formData.roomEquipmentsName = data.name;
    },
    handleDelete(event) {
      if (event && typeof event.preventDefault === 'function') {
        event.preventDefault(); // 阻止默认行为
      }
      this.$dialog.confirm({ title: "提示", message: "确定要删除吗？" }).then((res) => { 
        this.loading1 = true;
        res&&this.$axios({
          url: `/meetingDetail/delete?id=${this.formData.id}`,
          method: "delete",
          data: this.formData
        }).then((res) => {
          Toast.success(res || "删除成功");
          this.$router.push('/meetingSet');
        }).finaly(() => {
          this.loading2 = false;
        })
      })
      
    }
  }
}
</script>
<style scoped lang="less">
.page {
  position: relative;
  background: linear-gradient(to top right, #f4f9ff, #d8ebfc75, #E5F2FF);

  // .my-nav-bar2 {
  //   background-color: #E5F2FF;
  //   // margin-bottom: 10px;
  // }

  .my-form {
    border-radius: 10px;
    background-color: #fff;

  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 60px 0;

    .btn {
      width: 40%;
      border-radius: 40px;
    }
  }
}
</style>